<!-- 
首页面
 * @Author: zuobufan
 * @Location: 安庆石化信息中心
 * @LastEditors: zuobufan
 * @LastEditTime: 2021-09-15 15:34:00
 -->
<template>
  <div class="home" style="padding-bottom:50px;">
    <!-- 首页搜索框 -->
    <van-search
      v-model="searchVal"
      shape="round"
      placeholder="请输入搜索关键词"
      @click="$router.push('/home/searchPopup').catch(err =>{})"
    />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="skyblue">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img :src="item.image_url" alt width="100%">
      </van-swipe-item>
    </van-swipe>

    <!-- 搜索弹出框过渡动画 -->
    <transition name="slide">
      <router-view></router-view>
    </transition>

    <!-- 宫格 -->
    <van-grid :column-num="5">
      <van-grid-item
        v-for="item in channel"
        :key="item.id"
        :icon="item.icon_url"
        :text="item.name"
        @click="goChannel(item.id)"
      />
    </van-grid>

    <!-- 品牌制造商直供 -->
    <div class="brand">
      <div class="home-title">品牌制造商直供</div>
      <ul>
        <li v-for="item in brandList" :key="item.id" @click="goBrand(item.id)">
          <img :src="item.pic_url" alt>
          <h4>{{item.name}}</h4>
          <p>{{item.floor_price | RMBformat}}</p>
        </li>
      </ul>
    </div>

    <!-- 周一周四·新品首发-->
    <div class="newproduct">
      <div class="home-title">周一周四·新品首发</div>
      <Products :goodsList="goodsList"/>
    </div>

    <!-- 人气推荐 -->
    <div class="hotgoodslist">
      <div class="home-title">人气推荐</div>
      <ul>
        <li v-for="item in hotGoodsList" :key="item.id">
          <div class="left">
            <img :src="item.list_pic_url" alt>
          </div>
          <div class="right">
            <h3>{{item.name}}</h3>
            <h4>{{item.goods_brief}}</h4>
            <p>{{item.retail_price | RMBformat}}</p>
          </div>
        </li>
      </ul>
    </div>

    <!-- 专题推荐 -->
    <div class="topic">
      <div class="home-title">专题推荐</div>
      <van-swipe :loop="false" :autoplay="3000" :show-indicators="indicatorsBool" >
        <van-swipe-item v-for="item in topicList" :key="item.id" >
          <img :src="item.scene_pic_url" alt="" width="100%">
          <p class="p1">
            {{item.title}}
            <span>{{item.price_info | RMBformat}}</span>
          </p>
          <p class="p2">
            {{item.subtitle}}
          </p>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 居家 -->
    <div class="product" v-for="item in categoryList" :key="item.id" >
      <div class="home-title">{{item.name}}</div>
      <ul class="product-list">
        <li v-for="item1 in item.goodsList" :key="item1.id" @click="homeGoDtails(item1.id)">
          <img :src="item1.list_pic_url" alt="">
          <h4>{{item1.name}}</h4>
          <p>{{item1.retail_price | RMBformat}}</p>
        </li>
      </ul>
    </div>
    <BackToTop />
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import { GetHomeList } from "@/request/api";
import Products from "@/components/Products";
import BackToTop from "@/components/BackToTop";
export default {
  name: "Home",
  components: {
    Products,
    BackToTop
  },
  data() {
    return {
      indicatorsBool: false,//是否显示轮播图指示器
      searchVal: "",
      banner: [], //轮播图数组
      channel: [], //宫格
      brandList: [], //品牌制造商直供
      goodsList: [], //新品首发
      hotGoodsList: [], //人气推荐
      topicList:[], //专题推荐
      categoryList:[], //居家分类
    };
  },
  created() {
    GetHomeList()
      .then(res => {
        console.log(res.data);
        if (res.errno == 0) {
          let { banner, channel, brandList, hotGoodsList,topicList,categoryList } = res.data;

          this.banner = banner;
          this.channel = channel;
          this.brandList = brandList;
          this.hotGoodsList = hotGoodsList;
          this.topicList = topicList;
          this.categoryList = categoryList;
          this.goodsList = res.data.newGoodsList;

          // console.log(this.banner);
        }
      })
      .catch(err => {
        console.log("error", err);
      });
  },
  methods:{
     // 跳转到Channel页面
      goChannel(id){
        this.$router.push("/channel/?id="+id)
      },
      // 跳转到Brand页面
      goBrand(id){
        this.$router.push("/brand/?id="+id)
      },
      // 跳转到Details页面
      homeGoDtails(id){
        this.$router.push('/details/?id='+id);
        window.scroll(0,0)
      }
  }
};
</script>
<style lang="less" scoped>
* {
  font-size: 0.14rem;
}
/* popup滑入滑出效果 */
.slide-enter,
.slide-leave-to {
  // 过度开始之前的样式写在这里
  right: -100%;
}

.slide-enter-active,
.slide-leave-active {
  // 过度时的属性写在这里
  transition: right 0.5s linear;
}

.slide-enter-to,
.slide-leave {
  // 过度之后的样式写在这里
  right: 0;
}
.my-swipe .van-swipe-item {
  line-height: 0px;
  text-align: center;
}

// 品牌制造商直供
.brand {
  background-color: #fff;
  margin-top: 20px;
  margin-bottom: 20px;
  .home-title {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 0.2rem;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      width: 49%;
      position: relative;
      img {
        width: 100%;
      }
      h4 {
        position: absolute;
        top: 20px;
        left: 10px;
      }
      p {
        position: absolute;
        top: 40px;
        left: 10px;
        color: #8b0000;
      }
    }
  }
}

// 新品首发
.newproduct {
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #fff;
  .home-title {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 0.2rem;
  }
}

// 人气推荐
.hotgoodslist {
  background-color: #fff;
  .home-title {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 0.2rem;
  }
  ul {
    li {
      display: flex;
      .left {
        width: 30%;
        img {
          width: 100%;
        }
      }
      .right {
        width: 70%;
        h3 {
          max-height: 32px;
          font-weight: 500;
          line-height: 29px;
          font-size: 18px;
        }
        h4 {
          margin: 0.14rem 0;
        }
        p {
          color: #8b0000;
          line-height: 20px;
        }
      }
    }
  }
}

// 专题推荐
  .topic {
        margin-top: 20px;
        margin-bottom: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
        background-color: #fff;

        .home-title {
            font-size: 20px;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }

        .van-swipe {
            text-align: left;

            .van-swipe-item {
                margin-right: 15px;
                padding-left: 10px;

                img {
                    width: 100%;
                    height: 200px;
                }

                .p1 {
                    line-height: 40px;
                    font-size: 16px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    width: 88%; 

                    span {
                        color: #8b0000;
                    }
                }

                .p2 {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    width: 88%;
                }
            }
        }
  }

  // 居家
.product{
  background-color: #fff;
  margin: .2rem 0;
  .home-title{
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: .2rem;
  }
  ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: center;
    li{
      width: 49%;
      padding-bottom: 12px;
      img{
        width: 100%;
      }
      p{
        color: #8b0000;
      }
    }
  }
}
</style>

